/**
* hdfs文件管理
*/
<template>
  <div  class="app-container">
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" placeholder="输入文件名"></el-input>
      </el-form-item>
      <!--      <el-form-item label="">-->
      <!--        <el-input size="small" v-model="formInline.deptNo" placeholder="输入部门代码"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <!--        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>-->
      </el-form-item>

      <el-form-item >
        <el-button icon="el-icon-upload" type="success" @click="dialogVisible = true">上传文件</el-button>
      </el-form-item>
    </el-form>


    <div>
      当前路径：{{listData[0].parentPath}}
      <el-link v-if='listData[0].parentPath!=="/"' type="primary" @click="toParentsPath(listData[0].parentPath)"> 返回上一级 </el-link>
    </div>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">


      <el-table-column label="fileName">
        <template slot-scope="scope">
          <span v-if="scope.row.isFile==='true'" style="color:red"> {{ scope.row.fileName }} </span>
          <span v-else style="color: #36a3f7">
               <el-link type="primary" @click="getFilesList(scope.row.relativePath)">{{ scope.row.fileName }}</el-link>
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="duplicates" label="duplicates" >
      </el-table-column>


      <el-table-column sortable  label="修改时间" >
        <template slot-scope="scope">
          {{scope.row.modifyTime| dateFormat }}
        </template>

      </el-table-column>
      <el-table-column prop="filePath" label="路径">
      </el-table-column>



      <el-table-column sortable prop="group" label="group" >
      </el-table-column>


      <el-table-column label="isFile">
          <template slot-scope="scope">
            <span v-if="scope.row.isFile==='true'" style="color:red"> 是文件 </span>
            <span v-else style="color: #36a3f7">
               我是目录
            </span>
          </template>
      </el-table-column>

      <el-table-column prop="owner" label="owner">
      </el-table-column>

      <el-table-column prop="parentPath" label="父路径">
      </el-table-column>

      <el-table-column prop="relativePath" label="相对路径">
      </el-table-column>
      <el-table-column prop="rights" label="权限">
      </el-table-column>


      <el-table-column prop="size" label="大小">
      </el-table-column>





      <el-table-column  align="center" label="操作" >
        <template slot-scope="scope" width="100px">


          <el-button size="mini" style="margin-left: 0"  icon="el-icon-download" type="primary" @click="download(scope.$index, scope.row)">下载文件</el-button>
          <el-button size="mini" style="margin-left: 0" icon="el-icon-delete" type="danger" @click="deleteForever(scope.$index, scope.row)">彻底删除</el-button>

          <!--  查看块信息页面         -->
          <el-popover
            placement="right"
            v-if="scope.row.isFile === 'true'"
            trigger="click">
            <el-button size="mini" icon="el-icon-s-grid" type="success" slot="reference" @click="getBlockInfo(scope.$index, scope.row)">查看块信息</el-button>
            <el-table  :data="blockData">
              <el-table-column width="120" property="cachedHosts" label="cachedHosts"></el-table-column>
              <el-table-column width="120" property="corrupt" label="corrupt"></el-table-column>
              <el-table-column width="120" property="hosts" label="hosts"></el-table-column>
              <el-table-column width="120" property="length" label="length"></el-table-column>
              <el-table-column width="120" property="locatedBlock" label="locatedBlock"></el-table-column>
              <el-table-column width="120" property="names" label="names"></el-table-column>
              <el-table-column width="120" property="offset" label="offset"></el-table-column>
              <el-table-column width="120" property="topologyPaths" label="topologyPaths"></el-table-column>

            </el-table>
          </el-popover>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="upload"
      :visible.sync="dialogVisible"
      :before-close="handleClose" center>



    </el-dialog>

  </div>
</template>

<script>


import uploadFile from "@/views/file/uploadFile";
import {fileDelete, fileDeleteAccu, fileDeleteCancel, filesGet} from "@/api/file";
import {fileBlockLocation, hdfsListGet} from "@/api/hdfs";
export default {
  name: 'file',
  data() {
    return {
      dialogVisible: false,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        duplicates: "",
        fileName: "",
        filePath: "",
        group: "",
        isFile: "",
        modifyTime: "",
        owner: "",
        parentPath: "",
        relativePath: "",
        rights: "",
        size: ""
      },
      // rules表单验证
      rules: {
        // deptName: [
        //   { required: true, message: '请输入blog名称', trigger: 'blur' }
        // ],
        // deptNo: [{ required: true, message: '请输入blog代码', trigger: 'blur' }]
      },
      listData: [], //用户数据
      blockData: []
    }
  },
  // 注册组件
  components: {

  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getFilesList("/")
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    toParentsPath(path){
      //获取最后一个'/'的索引值，加一后截取至结束
      let index = path.lastIndexOf('/')
      let catalog = path.substr(0, index + 1)
      console.log(catalog)
      this.getFilesList(catalog);
    },
    getBlockInfo(index,row){
      fileBlockLocation(row.relativePath).then(
        res =>{
          this.blockData = res.data;
        }
      )
    },
    close(para){
      //关闭文件上传框
      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    getFilesList(path){
      console.log(path)
      hdfsListGet(path).then(
        res=>{
          console.log(res)
          this.listData = res.data
        }
      )
    },
    // 搜索事件
    search() {

    },
    // 删除file
    deleteFile(index, row) {
      this.$confirm('确定要逻辑删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {



        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteFileCancel(index,row){
      this.$confirm('确定要撤销逻辑删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {




        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    download(index, row){
      //下载请求
      window.open(row.fileLocation);
    },
    deleteForever(index, row) {
      /*彻底删除服务器该文件*/
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {



      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.editor-after-div >>>.el-upload{
  widtH:56px;
  height: 56px;
  text-align: center;
  line-height: 56px;
}

.editor-after-div >>>.el-upload-list__item-thumbnail{
  width: 56px;
  height: 56px;
}
.editor-after-div >>>.el-upload-list__item{
  width: 56px;
  height: 56px;
}

</style>


